<template>
	<view class="content" v-if="info">
		<view class="xq-box" style="padding: 20rpx 30rpx;display: flex;">
			<image class="goods-image" :src="info.logo_image" mode=""></image>
			<view class="goods-xq">
				<text class="goods-title">{{info.name}}</text>
				<!-- <text class="goods-des u-line-2">XXXXXXXXXXXXX</text> -->
				<text class="goods-price">维修费：¥{{info.price}}</text>
			</view>
		</view>
		<view class="xq-box">
			<view class="xq-title">
				<text>提交时间：{{info.createtime}}</text>
				<text class="type" v-if="info.repair_status == -1">待派单</text>
				<text class="type" style="color: #0055B0;" v-if="info.repair_status == 0">维修中</text>
				<text class="type" style="color: #E60012;" v-if="info.repair_status == 1">待确认</text>
				<text class="type" v-if="info.repair_status == 2">无法维修</text>
				<text class="type" style="color: #7C7C7C;" v-if="info.repair_status == 3">已完成</text>
			</view>
			<view class="xq-nr">
				<view class="" style="color: #333;font-size: 36rpx;font-weight: bold;">报修类目：{{info.name}}</view>
				<view>
					订单号 id：{{info.id}}
				</view>
				<view>
					维修地点：{{info.report}}
				</view>
				<view>
					维修时间：<text style="color: #E60012;">截止{{info.repair_date}}</text>
				</view>
				<view>
					报修说明：{{info.report_message}}
				</view>
				<view class="">
					报修图片：
				</view>
				<view>
					<u-upload ref="uUpload" :deletable="false" :show-progress="false" width="518rpx" height="684rpx"
						:max-count="fileList.length" :file-list="fileList"></u-upload>
				</view>
			</view>
			<view class="xq-btn">
				<view class="title">报修信息</view>
				<view>姓名：{{info.user_name}}</view>
				<view>电话：{{info.user_phone}}</view>
			</view>
		</view>
		<view class="xq-box" style="margin-bottom: 60rpx;padding-top: 40rpx;">
			<view class="title" style="padding-left: 20rpx;margin-bottom: 0;">服务商信息</view>
			<view class="xq-nr">
				<view>单位：{{info.company_name}}</view>
				<view>联系人：{{info.service_name}}</view>
				<view>电话：{{info.service_phone}}</view>
				<!-- <view>
					备注信息：XXXXXXXXXXXXXX
					XXXXXXXX
				</view> -->
			</view>
			<view class="xq-wxzt" v-if="info.repair_status == 0">
				<view class="name">
					维修状态<text>*</text>
				</view>
				<view class="wxzt-type" @click="showType = true">
					<text>{{repair_text}}</text>
					<image style="width: 10rpx;height: 18rpx;" src="https://s1.ax1x.com/2022/11/18/znVCxe.png" mode="">
					</image>
				</view>
			</view>
			<view class="xq-beizhu" v-if="info.repair_status == 0">
				<view class="name">
					备注信息：
				</view>
				<textarea v-model="repair_message" placeholder="请描述维修信息" name="" id="" cols="30" rows="10"></textarea>
			</view>
			<view class="xq-beizhu" style="padding-bottom: 30rpx;" v-if="info.repair_status == 0">
				<view class="name">
					上传维修图片：
				</view>
				<u-upload :action="action" ref="uUpload" width="160rpx" height="160rpx"></u-upload>
			</view>
			<block v-if="info.repair_status != 0 && info.repair_status != -1">
				<view class="xq-wxzt">
					<view class="name">
						维修状态
					</view>
					<view class="wxzt-type">
						<text>{{repair_text}}</text>
					</view>
				</view>
				<view class="xq-beizhu"
					style="border-bottom: 1px solid #EAEAEA;padding: 0;margin: 0 20rpx; margin-top: 30rpx;">
					<view class="name">
						备注信息：{{ info.repair_message }}
					</view>
				</view>
				<view class="xq-beizhu" style="padding-bottom: 30rpx;">
					<view class="name">
						维修图片：
					</view>
					<u-upload ref="uUpload" :deletable="false" :show-progress="false" width="518rpx" height="684rpx"
						:max-count="repair_images.length" :file-list="repair_images"></u-upload>
				</view>
			</block>
		</view>
		<button class="u-reset-button btn-moren" v-if="info.repair_status == 0" @click="order_confirm">提交维修信息</button>
		<u-select v-model="showType" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: null,
				fileList: [],
				showType: false,
				list: [{
					value: '1',
					label: '维修完成'
				}, {
					value: '2',
					label: '无法维修'
				}],
				repair_status: 1,
				repair_text: '维修完成',
				action: this.$IMG_URL + '/index/ajax/upload',
				repair_message: '',
				repair_images: [],
				index: 0
			}
		},
		onLoad(e) {
			this.id = e.id
			this.index = e.index
			if (uni.getStorageSync('servToken')) {
				this.getOrderXq()
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../../login/login'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/user/index/index'
							})
						}
					}
				});
			}

		},
		methods: {
			//  获取订单详情
			getOrderXq() {
				this.$u.post('/service/order_detail', {
					id: this.id
				}).then(res => {
					res.data.logo_image = this.$IMG_URL + res.data.logo_image
					this.info = res.data
					this.fileList = []
					res.data.report_images.forEach(item => {
						this.fileList.push({
							url: this.$IMG_URL + item
						})
					})
					this.repair_images = []
					if (res.data.repair_status == 2) {
						this.repair_text = '无法维修'
					} else {
						this.repair_text = '维修完成'
					}
					res.data.repair_images.forEach(item => {
						this.repair_images.push({
							url: this.$IMG_URL + item
						})
					})
				})
			},
			confirm(e) {
				console.log('1', e)
				this.repair_status = e[0].value
				this.repair_text = e[0].label
			},
			// 提交维修信息
			order_confirm() {
				let files = [];
				let images = []
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
				files.forEach(item => {
					images.push(item.response.data.url)
				})
				images = images.join(',')
					
				if(!images){
					uni.showToast({
						icon: 'error',
						title: '请上传维修图片'
					})
					return
				}
				this.$u.post('/service/order_confirm', {
					id: this.id,
					repair_status: this.repair_status,
					repair_images: images,
					repair_message: this.repair_message
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: res.msg
					})
					// this.getOrderXq()
					setTimeout(()=>{
						uni.navigateBack({
							delta:1,
							success: function (e) {
							    var page = getCurrentPages().pop();
							     if (page == undefined || page == null) return;
							        page.onLoad();
							      }
						})
					},800)
					uni.$emit('weixiu', {
						index: this.index
					})
				})
			}
		}
	}
</script>

<style lang="less">
.xq-box {
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.xq-nr {
		padding: 40rpx 20rpx;
		line-height: 73rpx;
		font-size: 34rpx;
		padding-bottom: 34rpx;
	}

	.xq-title {
		height: 130rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F7F7F9;
		padding: 0 20rpx;
		justify-content: space-between;
	}

	.xq-btn {
		font-size: 38rpx;
		padding: 40rpx 20rpx;
		border-top: 1px solid #F7F7F9;
		line-height: 64rpx;
	}

	.title {
		font-size: 38rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.goods-image {
	    width: 200rpx;
	    height: 200rpx;
		// background: #A0A0A0;
		border-radius: 10rpx;
		flex-shrink: 0;
	}

	.goods-xq {
		margin-left: 24rpx;
		padding-top: 9rpx;

		text {
			display: block;
		}

		.goods-title {
			font-size: 60rpx;
			font-weight: bold;
			margin-bottom: 15rpx;
		}

		.goods-des {
			font-size: 24rpx;
			color: #7C7C7C;
			line-height: 30rpx;
			margin-bottom: 37rpx;
		}

		.goods-price {
			font-size: 40rpx;
			color: #E60012;
			font-weight: bold;
		}
	}

	.xq-wxzt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 20rpx;
		height: 106rpx;
		border-top: 1px solid #EAEAEA;
		border-bottom: 1px solid #EAEAEA;

		.name {
			font-size: 34rpx;
			font-weight: 500;

			text {
				color: #E60012;
			}
		}

		.wxzt-type {
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #303133;
				margin-right: 21rpx;
			}
		}
	}

	.xq-beizhu {
		padding: 0 20rpx;
		padding-top: 30rpx;

		.name {
			font-size: 34rpx;
			font-weight: 500;
			padding-bottom: 30rpx;
		}

		textarea {
			width: 100%;
			height: 150rpx;
			border-bottom: 1px solid #EAEAEA;
		}
	}

	/deep/ .u-list-item {
		margin-left: 0 !important;
	}

	.content {
		padding-bottom: 60rpx;
	}
	
</style>
